@charset "utf-8" ;
@function r($px)
{
    @return $px/40*1rem    
}
@media only screen and (max-width:768px)
{
    .games_web
    {
        overflow: hidden;
    }
}

.games_web
{
    .carousel
    {
        
         margin-top: 3.5%;
    }
    @media only screen and (max-width:768px)
    {
        .carousel
        {
            margin-top: 16%;
            
            height:r(555);
        }
        .carousel-inner
        {
//          overflow: visible;
            white-space: nowrap;
            .item
            {
                display: inline-block;
                width:100%;
                padding-top: 52%;
                height: 0;
                margin: 0 auto;
                overflow: hidden;
                position: relative;
                img
                {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    height: 100%;
                    width: auto;
                    max-width: 100000px !important;
                    transform: translate(-50%,-50%);
                    transform-origin:center,center; 
                }
                
            }
        }
        
    }
    .container
    {
        width: 82%;
        position: relative;
        .renwu
        {
            position: absolute;
            top:15%;
            left: 5%;
        }
        .col-md-8
        {
            margin-top: 10%;
            h1
            {
                float: right;
            }
        }
        .col-md-7
        {
            margin-top: 1%;
            p
            {
                text-align: right;
                padding-top: 5%;
                line-height: 40px;
            }
            .col-md-6
            {
                margin-top: 2%;
            }
        }    
    }
    @media only screen and (max-width:768px)
    {
        .container
        {
            width: 100%;
            position: relative;
            .renwu
            {
                position: absolute;
                top:15%;
                left: 5%;
            }
            .col-md-8
            {
                margin-top: 0%;
                h1
                {
                    float: right;
                }
            }
            .col-md-7
            {
                margin-top: 1%;
                p
                {
                    text-align: right;
                    padding-top: 5%;
                    line-height: 20px;
                    font-size: xx-small;
                }
                .col-md-6
                {
                    margin-top: 5%;
                    img
                    {
                        width: 100%;
                    }
                }
            }    
        }
        
    }
    .middle
    {
         width: 80%;
        position: relative;
        .renwu2
        {
            position: absolute;
            top:15%;
            right: 5%;
        }
        margin:  auto;
        margin-top: 6%;
        .col-md-7
        {
            p
            {
                padding-top: 8%;
                line-height: 40px;
                font-size: xx-small;
            }
            .col-md-6
            {
                margin-top: 2%;
            }
            
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle
        {
            width: 100%;
            position: relative;
            .renwu2
            {
                position: absolute;
                top:15%;
                right: 5%;
            }
            width: 84%;
            margin:  auto;
            margin-top: 20%;
            .col-md-7
            {
                p
                {
                    padding-top: 8%;
                    line-height: 20px;
                    font-size: xx-small;
                }
                .col-md-6
                {
                    margin-top: 5%;
                    img
                    {
                        width: 100%;
                    }
                }
            }
        }
    }
    .middle2
    {
        width: 80%;
        margin:  auto;
        margin-top: 10%;
        .col-md-12
        {
            margin-bottom: 5%;
        }
        .col-md-4
        {
            
            margin: auto;
            text-align: center;
            overflow: hidden;
            
            
            .pic
            {
                width:100%;
                margin-bottom: 4%;
                display: block;
                border-radius:15px ;
                overflow: hidden;
                img
                {
                    width: 100%;
                    height: r(155);
                    
                }
            }
            .text
            {
                transform: translateY(-100%);
                position: absolute;
                width: 91.5%;
                height:r(155);
                top: 0%;
                left:4%;
                text-align: none;
                transition: all 0.8s;
                background: rgba(000,000,000,0.5);
                border-radius:12px ;
                padding-top: 10%;
                color: white;
            }
            .pic:hover .text
            {
                transform:translateY(0%);
            }
            .text2
            {
                
                padding: 0;
                margin-bottom: 10%;
            }
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle2
        {
            width: 90%;
            margin:  auto;
            margin-top: 10%;
            .col-md-12
            {
                margin-bottom: 5%;
            }
            .col-md-4
            {
                
                margin: auto;
                text-align: center;
                overflow: hidden;
                
                
                .pic
                {
                    width:100%;
                    margin-bottom: 4%;
                    display: block;
                    border-radius:5px ;
                    overflow: hidden;
                    img
                    {
                        width: 100%;
                        height: r(155);
                        
                    }
                }
                .text2
                {
                    
                    padding: 0;
                    margin-bottom: 10%;
                }
            }
        }
    }
    .foot
    {
        width: 100%;
        background: #3b3b3b;
        padding-top: 3%;
        padding-bottom: 3%;
        .inside_foot
        {
            
            width: 80%;
            margin: auto;
            background: #3b3b3b;
            .col-md-6,.col-xs-4
            {
                color: #a1a3ab;
                .col-md-2,.col-xs-3
                {
                    padding: 0;
                    
                }
            }
            
              
        } 
    }
    @media only screen and (max-width:768px)
    {
        .foot
        {
            width: 100%;
            background: #3b3b3b;
            padding-top: 3%;
            padding-bottom: 3%;
            .inside_foot
            {
                width: 95%;
                margin: auto;
                background: #3b3b3b;
                font-size:xx-small ;
                padding: 0;
                .col-md-6,.col-xs-4
                {
                    color: #a1a3ab;
                    padding-top: 10px;
                    padding-bottom: 5px;
                    .col-md-2,.col-xs-3
                    {
                        padding: 0;
                        
                    }    
                }
                .col-md-6
                {
                        
                }
                
                  
            } 
        }    
    }
}
